<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body { background: #121212; color: #fff; font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; }
      .login-card {
        max-width: 340px;
        margin: 5rem auto 0 auto;
        background: linear-gradient(120deg, #1F1F1F 60%, #2A2A2A 100%);
        border-radius: 22px;
        box-shadow: 0 6px 32px #000A, 0 1.5px 0 #232323 inset;
        padding: 2.2rem 1.5rem 1.5rem 1.5rem;
        border: 1.5px solid #232323;
        position: relative;
        overflow: hidden;
      }
      .login-title { font-size: 1.4rem; font-weight: bold; color: #00f2ea; text-align: center; margin-bottom: 2rem; }
      .login-input {
        width: 100%; background: #232323; color: #fff; border: 1px solid #00f2ea;
        border-radius: 10px; padding: 0.7rem 1rem; font-size: 1rem; margin-bottom: 1.2rem; box-sizing: border-box;
      }
      .login-btn {
        width: 100%; background: linear-gradient(90deg, #fe2c55 0%, #00f2ea 100%);
        color: #fff; font-weight: bold; padding: 0.7rem 0; border-radius: 1.2rem; font-size: 1.1rem; border: none; cursor: pointer;
        box-shadow: 0 2px 8px #fe2c5533; margin-bottom: 1.2rem; transition: background 0.18s;
      }
      .login-btn:hover { background: linear-gradient(90deg, #00f2ea 0%, #fe2c55 100%); }
      .login-tip { color: #fe2c55; text-align: center; font-size: 0.98rem; min-height: 1.5em; }
    </style>
  </head>
  <body>
    <div class="login-card">
      <div class="login-title">
        <i class="fa fa-user-circle mr-2"></i>账号登录
      </div>
      <input
        class="login-input"
        id="login-username"
        placeholder="账号/手机号"
      />
      <input
        class="login-input"
        id="login-password"
        type="password"
        placeholder="密码"
      />
      <div class="login-tip" id="login-tip"></div>
      <button class="login-btn" onclick="login()">登录</button>
    </div>
    <script>
      function login() {
        var u = document.getElementById('login-username').value.trim();
        var p = document.getElementById('login-password').value.trim();
        var tip = document.getElementById('login-tip');
        if (!u || !p) { tip.textContent = '请输入账号和密码'; return; }
        tip.textContent = '登录成功（mock）';
        setTimeout(()=>{ window.location.href = 'home.html'; }, 800);
      }
    </script>
  </body>
</html>
